<!--
 * @Date: 2023-05-08 14:07:49
 * @LastEditTime: 2023-05-10 11:07:00
-->
<template>
  <a-tag
    :visible="true"
    :color="isDefault ? defaultColor : ''"
    :closable="closable"
    @close="closeTag"
    @click.prevent="selectTag"
  >{{ tag[labelName.label] || tag.label }}
    <div class="ant-ribbon ant-ribbon-placement-end" v-if="isDefault">
      <span class="ant-ribbon-text">默认</span>
      <div class="ant-ribbon-corner"></div>
    </div>
  </a-tag>
</template>

<script>
export default {
  name: 'Tag',

  props: {
    tag: { type: Object, default: () => {} },
    closable: { type: Boolean, default: () => true },
    isDefault: { type: Boolean, default: () => false },
    defaultColor: { type: String, default: () => 'red' },
    labelName: { type: Object, default: () => {} }
  },

  data () {
    return {}
  },

  mounted () {},

  methods: {
    // 删除标签
    closeTag (e) {
      this.$emit('closeTag', { e, tag: this.tag })
    },
    // 选择标签
    selectTag (e) {
      this.$emit('selectTag', { e, tag: this.tag })
    }
  }
}
</script>

<style lang="less" scoped>
.ant-tag {
  padding: 5px 10px;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 5px;

  &.ant-tag-red {
    text-align: left;
    padding-right: 35px;
    margin-right: 15px;
  }

  .ant-ribbon.ant-ribbon.ant-ribbon-placement-end {
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    background: #f5222d;
    color: #f5222d;
    border-bottom-right-radius: 0;
  }

  .ant-ribbon {
    box-sizing: border-box;
    margin: 0;
    color: #000000d9;
    font-size: 12px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: 'tnum';
    position: absolute;
    top: 8px;
    height: 22px;
    padding: 0 5px;
    color: #fff;
    line-height: 22px;
    white-space: nowrap;
    background-color: #f5222d;
    border-radius: 2px;
  }

  .ant-ribbon-text {
    color: #fff;
  }

  .ant-ribbon.ant-ribbon-placement-end .ant-ribbon-corner {
    right: 0;
    border-color: currentcolor transparent transparent currentcolor;
  }

  .ant-ribbon-corner {
    position: absolute;
    top: 100%;
    width: 8px;
    height: 8px;
    color: currentcolor;
    border: 4px solid;
    transform: scaleY(0.75);
    transform-origin: top;

    &:after {
      position: absolute;
      top: -4px;
      left: -4px;
      width: inherit;
      height: inherit;
      color: #00000040;
      border: inherit;
      content: '';
    }
  }
}
</style>
